<template>
  <div>
    <div class="tool_bar">
      <el-col :span="24" class="warp-breadcrum">
        <el-button type="primary" @click="queryPermissionsInner">刷新</el-button>
        <el-button type="primary" @click="newPermissionPre">新增</el-button>
      </el-col>
    </div>

    <div class="search_result_list">
      <el-col :span="24" class="toolbar block">
        <!--数据分页
            layout：分页显示的样式
            :page-size：每页显示的条数
            :total：总数
            具体功能查看地址：http://element.eleme.io/#/zh-CN/component/pagination
        -->
        <el-pagination
          layout="total,prev,pager,next,jumper"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          :total="totalElements"
          background
          :hide-on-single-page="false"
          style="text-align: center;"
        ></el-pagination>
      </el-col>
      <el-table :data="permissions" stripe border v-loading="listLoading">
        <el-table-column
          type="index"
          :index="index"
          label="序号"
          width="69px"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column prop="name" label="权限名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="permission" label="权限" header-align="center" align="center"></el-table-column>

        <el-table-column prop="description" label="权限描述" header-align="center" align="center"></el-table-column>

        <el-table-column label="操作" width="80px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              title="删除权限"
              type="primary"
              icon="el-icon-delete"
              circle
              @click="permissionDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增权限弹框 -->
    <el-dialog
      title="新增权限"
      @close="addDialogClose"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
    >
      <!-- 新增权限的表单 -->
      <el-form :model="addPermissionModel" label-width="100px">
        <el-form-item prop="name" label="权限名称">
          <el-input v-model="addPermissionModel.name"></el-input>
        </el-form-item>
        <el-form-item prop="permission" label="权限">
          <el-input v-model="addPermissionModel.permission"></el-input>
        </el-form-item>
        <el-form-item prop="description" label="权限描述">
          <el-input v-model="addPermissionModel.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="newPermission">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "permissionMgmt",
  data() {
    return {
      listLoading: false,
      pageNo: 1,
      pageSize: 10,
      totalElements: 0,

      permissions: [],

      addDialogVisible: false,
      addPermissionModel: {
        name: "",
        permission: "",
        description: ""
      }
    };
  },
  mounted() {
    this.queryPermissions();
  },
  methods: {
    queryPermissions: function() {
      this.pageNo = 1;
      this.queryPermissionsInner();
    },
    queryPermissionsInner: function() {
      this.listLoading = true;
      this.$api.permission
        .queryPermissionsPage(this.pageNo, this.pageSize)
        .then(res => {
          this.listLoading = false;
          if (!res) {
            return;
          }

          this.totalElements = res.body.totalElements;
          this.permissions = res.body.list;
        });
    },
    // 新增权限Pre
    newPermissionPre: function() {
      this.addDialogVisible = true;
    },
    // 新增权限
    newPermission: function() {
      this.$api.permission.addPermission(this.addPermissionModel).then(res => {
        if (!res) {
          return;
        }

        this.addDialogVisible = false;
        this.$message({
          type: "success",
          message: "权限新增成功"
        });
        this.queryPermissions();
      });
    },
    addDialogClose: function() {
      this.addPermissionModel = {
        name: "",
        permission: "",
        description: ""
      };
    },

    permissionDelete: function(row) {
      this.$confirm("此操作将删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.permission.deletePermission(row).then(res => {
            if (!res) {
              return;
            }

            this.queryPermissions();
            this.$message({
              type: "success",
              message: "权限删除成功"
            });
          });
        })
        .catch(() => {});
    },

    //点击分页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.queryPermissionsInner();
    },

    index: function(idx) {
      return idx + 1 + (this.pageNo - 1) * this.pageSize;
    }
  }
};
</script>

<style scoped>
.search_result_list {
  margin-left: -14px;
}

.tool_bar {
  margin-top: 20px;
}

.el-checkbox {
  margin-top: 10px;
}
</style>
